<template>
  <div>
    <a-card :bordered="false">
      <a-button type="primary" icon="plus-circle" style="margin: -15px 0 15px;" @click="clickAddEditForm('add')">添加 </a-button>
      <a-table
        size="small"
        :columns="columns"
        :dataSource="tableList"
        :rowKey="(record, index) => record.teamId"
      >
        <!--序号-->
        <template slot="index" slot-scope="text, record, index">
          <span>{{ (queryParam.pageNum - 1) * pagination.pageSize + (index + 1) }}</span>
        </template>
        <!--操作-->
        <template slot="tags" slot-scope="text, record">
          <div class="g-flex g-x-center ">
            <a-button class="g-bt-pad-0" type="link" @click="clickDrawer(record)">详情</a-button>
            <a-button class="g-bt-pad-0" type="link" @click="clickAddEditForm('edit',record)">修改</a-button>
            <a-popconfirm title="确定删除吗?" @confirm="() =>clickDeleteTeam(record)">
              <a-button class="g-bt-pad-0" type="link" >删除</a-button>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </a-card>
    <add-edit-form ref="addEditForm" :open_type="open_type" :row_record="row_record" @updateSuccess="getList" />
    <drawer ref="drawer" :row_record="row_record"/>
  </div>
</template>

<script>
import {getTeamDefinitionList,DeleteTeamDefinition} from '@/api/bd/team'
import { SuperTable } from '@/components'
import moment from 'moment'
import addEditForm from '@/views/baseData/team/teamDefinition/addEditForm'
import drawer from '@/views/baseData/team/teamDefinition/drawer'
export default {
  components: {
    SuperTable,
    addEditForm,
    drawer
  },
  data() {
    return {
      tableList:[],
      row_record:{},
      open_type:'add',
      tel_arr: [], //联系号码数组
      form: this.$form.createForm(this),
      selectedRowKeys: [],
      allHisUser: {}, //全员员工
      customerLevel: [], //客户等级
      customerState: [], //客户状态
      advanced: false, // 高级搜索 展开/关闭
      tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
      columns: [
        { title: '序号', align:'center', scopedSlots: { customRender: 'index' }, width: 70 },
        { title: '班组类型', align:'center', dataIndex: 'teamTypeName' },
        { title: '班组名称', align:'center', dataIndex: 'teamName', width: 100 },
        { title: '组长ID', align:'center', dataIndex: 'teamLeaderId'},
        { title: '组长姓名', align:'center', dataIndex: 'teamLeader' },
        { title: '是否禁用', dataIndex: 'isDisabled', align:'center', width: 90, customRender: (text) => {return text == 0 ? '否' : '是'}},
        { title: '操作', align:'center', dataIndex: 'tags', key: 'tags', scopedSlots: { customRender: 'tags' }, fixed: 'right', width: 135, },
      ],
      data: [],
      pagination: {
        current: 1, //当前页
        pageSize: 20, //当前页数
        total: 0, //总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'], //这里注意只能是字符串，不能是数字
        showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
      },
      // 查询参数
      queryParam: {
        pageNum: 1, //第几页
        pageSize: 20, //每页中显示数据的条数
      },
      loading: false, //加载状态
    }
  },
  created() {
    this.getList()
    // AllHisUser().then((res) => {
    //   this.allHisUser = res
    // })
    // CustomerLevel().then((res) => {
    //   this.customerLevel = res
    // })
    // CustomerState().then((res) => {
    //   this.customerState = res
    // })
  },
  methods: {
    getList(){
      getTeamDefinitionList().then((res) => {
        this.tableList=res.rows
        console.log('班组列表',res)
      })
    },

    clickAddEditForm(type,record=null){
      this.open_type=type
      this.$refs.addEditForm.show()
      if(type=='edit'){
        this.row_record=record
      }
    },
    /**
     * 删除班组
     * **/
    clickDeleteTeam(record){
      const tbNetTeamDefinitionId= record.tbNetTeamDefinitionId
      DeleteTeamDefinition({tbNetTeamDefinitionId}).then(res=>{
        if(res.code==200){
          this.$message.success(res.message)
          this.getList()
        }else{
          this.$message.info(res.message)
        }
        console.log('删除结果',res)
      })
    },
    clickDrawer(record){
      this.row_record=record
      this.$refs.drawer.show()
    },

    //点击查询
    clickSearch() {
      const form_values = this.form.getFieldsValue()
      const time = form_values.registDate
      if (time && time.length > 0) {
        form_values.registDateStart = moment(time[0]).format('YYYY-MM-DD')
        form_values.registDateEnd = moment(time[1]).format('YYYY-MM-DD')
        form_values.registDate=undefined
      }
      this.queryParam = Object.assign(this.queryParam,form_values)
      this.$refs.customerList.refresh(true)
    },
    clickReset() {
      this.form.resetFields()
    },
    //点击查看客户详情
    toDetails(text, tags, i = 0) {
      this.$router.push({
        path: 'customer_details',
        query: {
          id: tags.customerCrmId,
          card_no: tags.mzCode,
          customerName:tags.customerName
        },
      })
    },
  },
}
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}
/deep/ .ant-calendar-date-panel {
  display: flex;
}
/deep/ .ant-calendar-input {
  flex: 1;
  width: 100%;
}
/deep/ .ant-calendar-input[placeholder] {
  text-align: center !important;
}
button {
  margin-right: 8px;
}
/deep/ .ant-col {
  padding: 0 12px !important;
}
::-webkit-scrollbar {  /* 滚动条整体部分 */
  width:10px;
  margin-right:2px
}
</style>